<!doctype html>
<html lang="cn">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,user-scalable=no" />
		<title>话费支付</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="css/iconfont/iconfont.css">
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>
		<script type="text/javascript" src="js/basic.js"></script>
	</head>

	<body data-type = "product">

		
		<div id="mask" style="width: 100%; height: 100vh; background-color: #fff; position: absolute; top: 0; left: 0; z-index: 3; display: block"></div>
		<!-- 头部 -->
		<header class="header" style="display: none">
			<div class="item active" onclick="window.location.href='product.html'">话费支付</div>
			<div class="item" onclick="window.location.href='recharge.html'">微信支付</div>
		</header>
		<!-- 搜索 -->
		<div class="ProSearch">
			<i class="iconfont icon-search"></i>
			<span>沃视频</span>
		</div>
		<!-- 内容区域 -->
		<section class="wrap gray_bg wrapTop">
			<!-- banner -->
			<div class="swiper-container main_banner" style="height: 120px">
				<div class="swiper-wrapper">
					<div class="swiper-slide" onclick="window.open('','_self')"><img src="http://pic.qiantucdn.com/58pic/26/52/55/53n58PICsgM_1024.jpg!/fw/780/watermark/url/L3dhdGVybWFyay12MS4zLnBuZw==/align/center"></div>
					<div class="swiper-slide" onclick="window.open('','_self')"><img src="http://img.zcool.cn/community/013c15558b91a8000000b18fef0003.png"></div>
				</div>
				<!-- 如果需要分页器 -->
				<div class="swiper-pagination"></div>
			</div>

			<!-- 提示消息 -->
			<div class="hotTips">
				<i class="iconfont icon-laba"></i>
				<div class="swiper-wrapper">
					<div class="swiper-slide">看电影神奇|WO+视频腾讯定向流量包</div>
					<div class="swiper-slide">5元1G大放送</div>
					<div class="swiper-slide">流量月包订购流量可转结</div>
					<div class="swiper-slide">超大流量随意用</div>
				</div>
			</div>

			<div class="flowshopNav">
				<div class="swiper-wrapper">
					<div class="swiper-slide active"><i class="iconfont icon-rili"></i><span>节假包</span></div>
					<div class="swiper-slide"><i class="iconfont icon-shangdian"></i><span>月租包</span></div>
					<!--<div class="swiper-slide"><i class="iconfont icon-tianqi"></i><span>日租包</span></div>
					<div class="swiper-slide"><i class="iconfont icon-shiping"></i><span>闲时包</span></div>
					<div class="swiper-slide"><i class="iconfont icon-duanxin"></i><span>定向包</span></div>
					<div class="swiper-slide"><i class="iconfont icon-xing"></i><span>短信包</span></div>-->
				</div>
			</div>

			<div class="payListCon">
				

			</div>
		</section>
		
		<script src="js/config.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<!-- Initialize Swiper -->
		<script type="text/javascript">
			var mySwiper = new Swiper('.hotTips', {
				direction: 'vertical',
				loop: true,
				autoplay: 1500,
				autoplayDisableOnInteraction: false,
				speed: 400,
				effect: "slide",
				slidesPerView: 1,
				centeredSlides: true,
			});
			// var swiper = new Swiper('.flowshopNav', {
			// 	pagination: '.swiper-pagination',
			// 	slidesPerView: 5,
			// 	paginationClickable: true,
			// 	spaceBetween: 0
			// });

			// (function() {
			// 	var oDiv = document.querySelector(".flowshopNav");
			// 	var aItem = oDiv.querySelectorAll(".swiper-slide");
			// 	var aCon = document.querySelectorAll(".payListItem");
			// 	for(var i = 0; i < aItem.length; i++) {
			// 		aItem[i].setAttribute("index", i);
			// 		aItem[i].onclick = function() {
			// 			for(var i = 0; i < aItem.length; i++) {
			// 				aItem[i].className = "swiper-slide";
			// 				aCon[i].style.display = "none";
			// 			}
			// 			this.className = "swiper-slide active";
			// 			aCon[this.getAttribute("index")].style.display = 'block';
			// 		}
			// 	}

			// })();
			(function() {
				var oH = document.querySelector(".main_banner").offsetHeight;
				var ProSearch = document.querySelector(".ProSearch");
				var oWrap = document.querySelector(".wrap");
				oWrap.onscroll = function() {
					if(oWrap.scrollTop >= oH) {
						ProSearch.style.display = "none";
					}
					if(oWrap.scrollTop < oH) {
						ProSearch.style.display = "block";
					}
				}
			})();
		</script>
	</body>

</html>